<template>
	<view class="display column deliveryAre borderR">
		<text class="deliveryTitle">发货</text>
		<uni-icons class="close" :type="'closeempty'" :color="blackColor" size="20" @click="cancel"/>
		<form @submit="formSubmit" class="mainAre">
			<view class="display column calc">
				<view class="display flow mainItemAre borderB">
					<text class="label">快递公司</text>
					<input class="input" type="text" name="name" placeholder="请输入快递公司"/>
				</view>
				<view class="display flow mainItemAre borderB">
					<text class="label">快递单号</text>
					<input class="input" type="text" name="number" placeholder="请输入快递单号"/>
				</view>
			</view>
			
			<button class="btn themeBgColor bottom" form-type="submit">提交</button>
		</form>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	export default {
		props: ['orderList'],
		data() {
			return {
				blackColor: this.global.blackColor
			};
		},
		methods:{
			formSubmit:function(e){
				// console.log(e)
				var name = e.detail.value.name
				var number =  e.detail.value.number;
				if(number != ''){
					var type= 'alphanumeric'
					var validation = util.validation(number,type)
					if(!validation){
						util.showModal('提示','快递单号输入不正确')
						return
					}
				}else{
					util.showModal('提示','请输入快递单号')
					return
				}
				if(name == ""){
					util.showModal('提示','请输入快递公司')
					return
				}
				this.save(name,number)
			},
			save:function(name,number){
				util.getAjax(this.global.apiUrl + '/user_shop_deliver_goods',(res)=>{
					console.log(res);
					if(res.data.code == 200){
						util.showToast('success','提交成功，请耐心等待审核通过')
						this.$emit('deliveryOk','delivery')
					}else{
						util.showToast('none','提交失败，请重新尝试')
					}
				},{id: this.orderList.id,express_num: number,express: name})
			},
			cancel(){
				this.$emit('deliveryCancel','delivery')
			}
		}
	}
</script>

<style lang="scss">
	.deliveryAre{
		@include widthHeight(100%,600rpx);
		@include backG;
		position: relative;
		.deliveryTitle{
			line-height: 60rpx;
			@include padding(15rpx 0);
			@include font;
			@include text-align;
		}
		.close{
			position: absolute;
			top: 15rpx;
			right: 30rpx;
		}
		@import '@/common/css/sms.scss';
		.mainAre{
			@include width;
			.btn{
				@include borderR(0);
			}
		}
	}
</style>
